<template>
  <div class="pricing-section">
    <div class="section-header">
      <h2>选择适合您的套餐</h2>
      <p>灵活的套餐方案，满足不同规模企业的需求</p>
      <div v-if="effectiveSubscriptionStatus === 1" class="subscription-info">
        <el-tag type="success" effect="dark">当前已订阅专业版套餐</el-tag>
      </div>
    </div>
    <div class="pricing-grid">
      <div v-for="plan in plans" :key="plan.id" class="pricing-card">
        <el-card 
          class="card"
          :class="{ 'active-plan': effectiveSubscriptionStatus === 1 && plan.id === 2 }"
        >
          <div class="plan-header">
            <h3 class="plan-title">{{ plan.title }}</h3>
            <div class="plan-price">
              <span class="price-number">{{ plan.price }}</span>
              <span class="price-unit">{{ plan.unit }}</span>
            </div>
          </div>
          <div class="plan-features">
            <ul>
              <li v-for="(feature, index) in plan.features" :key="index">
                <el-icon class="check-icon"><Check /></el-icon>
                {{ feature }}
              </li>
            </ul>
          </div>
          <div class="plan-cta">
              <!-- 已订阅状态下，专业版显示取消订阅按钮，其他套餐显示升级按钮 -->
              <div v-if="effectiveSubscriptionStatus === 1">
                <el-button 
                  v-if="plan.id === 2"
                  type="danger" 
                  @click="handleUnsubscribe"
                  class="unsubscribe-button"
                >
                  取消订阅
                </el-button>
                <el-button 
                  v-else
                  type="primary" 
                  disabled
                  class="disabled-button"
                >
                  已订阅更高级套餐
                </el-button>
              </div>
              <!-- 未订阅状态下，专业版显示订阅按钮，免费版显示使用按钮（不触发订阅） -->
              <div v-else>
                <el-button 
                  v-if="plan.id === 2"
                  type="primary" 
                  @click="() => handleSubscribe(plan)"
                  class="subscribe-button"
                >
                  {{ plan.buttonText }}
                </el-button>
                <el-button 
                  v-else
                  disabled
                  class="subscribe-button"
                >
                  {{ plan.buttonText }}
                </el-button>
              </div>
            </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Check } from '@element-plus/icons-vue'

// 定义props
const props = defineProps({
  subscriptionStatus: {
    type: Number,
    default: 0
  }
})

// 定义emit
const emit = defineEmits(['subscribe', 'unsubscribe'])

// 响应式数据
const localSubscriptionStatus = ref(0)
const plans = ref([
  {
    id: 1,
    title: '免费版',
    price: '0',
    unit: '元/月',
    buttonText: '使用免费版',
    features: [
      '基础需求记录与查询',
      '最多100个客户管理',
      '基础统计功能',
    ]
  },
  {
    id: 2,
    title: '专业版',
    price: '999',
    unit: '元/月',
    buttonText: '立即订阅',
    features: [
      '全部免费版功能',
      '无限客户管理',
      '优先技术支持',
      'API接入权限',
      "专属顾问服务",
      "电话和在线实时技术支持",
      "24/7 客户服务",
      "专业数据图表分析"
    ]
  }
])

// 计算属性
const effectiveSubscriptionStatus = computed(() => {
  // 使用props中的subscriptionStatus，如果不存在则使用本地状态
  return typeof props.subscriptionStatus === 'number' ? props.subscriptionStatus : localSubscriptionStatus.value
})

// 生命周期钩子
onMounted(() => {
  try {
    // 安全地获取缓存的订阅状态
    if (typeof localStorage !== 'undefined') {
      const cachedSubscriptionStatus = localStorage.getItem('subscriptionStatus')
      if (cachedSubscriptionStatus !== null) {
        localSubscriptionStatus.value = parseInt(cachedSubscriptionStatus) || 0
      }
    }
  } catch (error) {
    console.error('获取订阅状态缓存失败:', error)
    localSubscriptionStatus.value = 0
  }
})

// 方法
const handleSubscribe = (plan) => {
  console.log('选择订阅套餐:', plan)
  // 传递套餐信息给父组件，让父组件调用后端API
  emit('subscribe', { plan: plan.id, hasSubscription: 1 })
}

const handleUnsubscribe = () => {
  console.log('取消订阅')
  // 通知父组件取消订阅，让父组件调用后端API
  emit('unsubscribe', { hasSubscription: 0 })
}
</script>

<style scoped>
.pricing-section {
  padding: 40px 20px;
  background-color: white;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-header h2 {
  font-size: 2rem;
  color: #667eea;
  margin-bottom: 10px;
}

.section-header p {
  color: #666;
  font-size: 1.1rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  max-width: 800px;
  margin: 0 auto;
}

.pricing-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-10px);
}

.card {
  height: 100%;
  border-radius: 12px !important;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.active-plan {
  border: 2px solid #67c23a !important;
  position: relative;
}

.active-plan::before {
  content: '当前套餐';
  position: absolute;
  top: 10px;
  right: 10px;
  background: #67c23a;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.subscription-info {
  margin-top: 15px;
  text-align: center;
}

.card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.plan-header {
  text-align: center;
  padding: 30px 20px 20px;
}

.plan-title {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 15px;
}

.plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 20px;
}

.price-number {
  font-size: 3rem;
  font-weight: bold;
  color: #667eea;
}

.price-unit {
  font-size: 1.1rem;
  color: #666;
  margin-left: 5px;
}

.plan-features {
  padding: 0 20px 20px;
}

.plan-features ul {
  list-style: none;
  padding: 0;
}

.plan-features li {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: flex-start;
  color: #666;
}

.plan-features li:last-child {
  border-bottom: none;
}

.check-icon {
  color: #409eff;
  margin-right: 10px;
  font-size: 16px;
  margin-top: 3px;
}

.plan-cta {
  padding: 20px;
  text-align: center;
}

.subscribe-button {
  width: 100%;
  border-radius: 30px !important;
  padding: 12px 0 !important;
  font-size: 1.1rem !important;
  background-color: #667eea !important;
  border-color: #667eea !important;
}

.subscribe-button:hover {
  background-color: #5a67d8 !important;
  border-color: #5a67d8 !important;
}

.unsubscribe-button {
  width: 100%;
  border-radius: 30px !important;
  padding: 12px 0 !important;
  font-size: 1.1rem !important;
}

.disabled-button {
  width: 100%;
  border-radius: 30px !important;
  padding: 12px 0 !important;
  font-size: 1.1rem !important;
}

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  
  .section-header h2 {
    font-size: 1.8rem;
  }
  
  .price-number {
    font-size: 2.5rem;
  }
}
</style>